<template>
  <div >
    <div  v-loading="loading"
     element-loading-text="加载中。。。">
      <el-card>
        <el-form ref='QueryForm' :model='QueryForm' :rules="rules" size='mini'  label-position="top">
          <el-row :gutter="10">
            <el-col  :lg="4" :md="6">
              <el-form-item label='机构编号'  prop='branchNum'>
              <el-select v-model="QueryForm.branchNum" filterable placeholder="请选择机构" >
                <el-option
                v-for="item in branchNum"
                :key="item.orgno"
                :label="item.orgno+'-'+item.cname"
                :value="item.orgno"
                :disabled="item.disabled">
                </el-option></el-select>
              </el-form-item>
            </el-col>
            <el-col  :lg="4" :md="6">
              <el-form-item label='设备类型'  prop='deviceType'>
              <el-select v-model="QueryForm.deviceType" filterable placeholder="请选择设备类型" >
                <el-option
                v-for="item in deviceTypeList"
                :key="item.DataKeyVal"
                :label="item.DataKeyVal+'-'+item.Meaning"
                :value="item.DataKeyVal"
                :disabled="item.disabled">
                </el-option></el-select>
              </el-form-item>
            </el-col>
            <el-col  :lg="4" :md="6">
              <el-form-item label='广告编号'  prop='adNo'>
                <el-input v-model="QueryForm.adNo" placeholder="请输入广告编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col  :lg="4" :md="6">
              <el-form-item label='播放规则编号'  prop='adsRuleId'>
                <el-input v-model="QueryForm.adsRuleId" placeholder="请输入播放规则编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col  :lg="2" :md="3" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="query">查询</el-button>
            </el-col>
            <el-col  :lg="2" :md="3" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh'
              @click="resetForm('QueryForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card style="margin-top:10px;" >
        <el-row>
          <el-col :lg="2" :md="3">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="clickAdd" v-if="btnPermission('Button_Menu_Add')">新增</el-button>
          </el-col>
          <el-col :lg="2" :md="3">
            <el-button type="primary" :disabled="!isDisabledDel" icon="el-icon-edit" size="mini" @click="checkPermission('1')" v-if="btnPermission('Button_Menu_Add')">修改</el-button>
          </el-col>
          <el-col :lg="2" :md="3">
            <el-button type="danger" :disabled="!isDisabledDel" icon="el-icon-delete" size="mini" @click="checkPermission()" v-if="btnPermission('Button_Menu_Edit')">删除</el-button>
          </el-col>
        </el-row>
        <el-table  ref="tabelDataList" :data='tabelDataList' border style="min-height:390px"
          class="tableMarginTop"
          header-row-class-name="tableHeaderClass"
          @selection-change="selectList">
            <el-table-column type="selection" width="40px"></el-table-column>
            <el-table-column prop='Brno' :formatter="dataFormat" label='机构编号' min-width='247px'></el-table-column>
            <el-table-column prop='PlayRuleID' label='规则ID' min-width='107px'></el-table-column>
            <el-table-column prop='DeviceType' label='设备类型'  min-width='107px'></el-table-column>
            <el-table-column prop='AdNo'  label='广告编号' min-width='107px'></el-table-column>
            <el-table-column prop='PlayStyle' :formatter="dataFormat" label='播放样式' min-width='107px'  ></el-table-column>
            <el-table-column prop='WordStyle' :formatter="dataFormat" label='文字样式' min-width='107px'  ></el-table-column>
            <el-table-column prop='PictureStyle' :formatter="dataFormat" label='图片样式' min-width='147px'  ></el-table-column>
            <el-table-column prop='VoiceStyle' label='音频样式' min-width='107px'  ></el-table-column>
            <el-table-column prop='VideoStyle' label='视频样式' min-width='107px'  ></el-table-column>
            <el-table-column prop='FileSpaceTime' label='文件播放间隔时间' min-width='77px'  ></el-table-column>
            <el-table-column prop='AdSpaceTime' label='广告播放间隔时间' min-width='77px'  ></el-table-column>
            <el-table-column prop='HomePlayFlag' :formatter="dataFormat" label='主界面是否显示' min-width='97px'  ></el-table-column>
            <el-table-column prop='HomeSpaceTime' label='主界面显示间隔时间' min-width='97px'  ></el-table-column>
            <el-table-column prop='DefaultFlag' :formatter="dataFormat" label='是否默认' min-width='57px'  ></el-table-column>
            <el-table-column prop='Remark' label='备注' min-width='107px'  ></el-table-column>
        </el-table>
        <div  style="text-align:right;margin-top:10px">
          <el-pagination background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <keep-alive>
      <component :is='dialogList.busiTypeAdd' :option='dialogOptions' @refreshTable="query"></component>
    </keep-alive>
  </div>
</template>


<script>
import busiTypeAdd from "./dialog/busiTypeAdd";
import request from "@/common/utils/request";
import branchList from "@/message/shared/branch-list"; //机构号
import getGlobalParams from "@/common/utils/getGlobalParams";
import delBusiType from "@/message/queuingMachineManage/busiTypeManage/busi-type-del";
import queryAdsRule from "@/message/resourceManage/advertising/adsRuleManage/ads-rule-query";
import delAdsRule from "@/message/resourceManage/advertising/adsRuleManage/ads-rule-del";
import queryDeviceType from "@/message/shared/dev-form";
import toolBox from "@/common/utils/toolBox";
export default {
  data() {
    return {
      currentRow: [], //当前表格选中数据
      QueryForm: {
        //查询表单
        branchNum: "",
        deviceType: "",
        adsRuleId: "",
        adNo: ""
      },
      branchNum: [], //应用编号下拉框
      busiStatusMap: {},
      busiAttrMap: {},
      total: undefined,
      tabelDataList: [],
      deviceTypeList: [],
      defaultFlagMap: {},
      playStyleMap: {},
      wordStyleMap:  {},
      pictureStyleMap: {},
      homePlayFlagMap: {},
      brnoMap: {},
      permission: {},
      loading: false,
      isDisabledDel: false,
      dialogList: { busiTypeAdd },
      dialogOptions: { isShow: false },
      currentPage: 1,
      pageSize: undefined,
      rules: {
        branchNum: [
          {
            required: true,
            message: "请选择机构编号",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.pageSize = getGlobalParams.get("PageSize");
    this.defaultFlagMap = getGlobalParams.get("IsReserve");
    this.playStyleMap = getGlobalParams.get("PlayStyle");
    this.wordStyleMap = getGlobalParams.get("WordStyle");
    this.pictureStyleMap = getGlobalParams.get("PictureStyle");
    this.homePlayFlagMap = getGlobalParams.get("HomePlayFlag");
    this.queryBranchNum();
    this.queryDeviceType();
  },
  computed: {},
  methods: {
    queryBranchNum() {
      let resBody = new branchList();
      resBody.data.orgno = this.$store.getters.BranchNum;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.branchNum = response.RspInfo.Result || [];
            this.permission = toolBox.objArray2Hash(this.branchNum, "orgno");
            this.brnoMap = response.RspInfo.orgMap || {};
          } else {
            this.$message({
              type: "warning",
              message: SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          console.error("查询错误", error);
        });
    },
    queryDeviceType() {
      let resBody = new queryDeviceType();
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.deviceTypeList =  response.RspInfo.Result || [];
          } else {
            this.$message({
              type: "warning",
              message: SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          console.error("查询错误", error);
        });
    },
    dataFormat(row, column) {
      //格式化表格
      //枚举设备形式
      if (column.property == "Brno")
        return row[column.property] + "-" + this.brnoMap[row[column.property]];
      if (column.property == "DefaultFlag")
        return this.defaultFlagMap[row[column.property]];
      if (column.property == "PlayStyle")
        return this.playStyleMap[row[column.property]];
      if (column.property == "WordStyle")
        return this.wordStyleMap[row[column.property]];
      if (column.property == "PictureStyle")
        return this.pictureStyleMap[row[column.property]];
      if (column.property == "HomePlayFlag")
        return this.homePlayFlagMap[row[column.property]];
    },
    clickAdd() {
      this.dialogOptions.isShow = true;
      this.dialogOptions.title = "新增广告播放规则";
      this.dialogOptions.mark = "1";
      this.dialogOptions.isDisabled = false;
      this.dialogOptions.branchNum = this.branchNum;
    },
    clickUpdate() {
      this.dialogOptions.isShow = true;
      this.dialogOptions.title = "修改广告播放规则";
      this.dialogOptions.mark = "2";
      this.dialogOptions.isDisabled = true;
      this.dialogOptions.currentRow = this.currentRow;
      this.dialogOptions.branchNum = this.branchNum;
    },
    checkPermission(val) {
      if (this.permission[this.currentRow.Brno]) {
        if (val) {
          this.clickUpdate();
        } else {
          this.delBut();
        }
      } else {
        this.$message({
          type: "warning",
          message: "权限不足,无法修改！"
        });
      }
    },
    resetForm() {
      this.$refs.QueryForm.resetFields();
    },
    delBut() {
      this.$confirm("此操作将永久删除该广告播放规则, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.busiTypeDel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    busiTypeDel() {
      //删除
      this.loading = true;
      let resBody = new delAdsRule();
      resBody.data.PlayRuleID = this.currentRow.PlayRuleID;
      resBody.data.AdNo = this.currentRow.AdNo;
      request(resBody)
        .then(response => {
          this.loading = false;
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.$message({
              type: "success",
              message: "广告播放规则删除成功！"
            });
            this.query();
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
    },
    query() {
      this.$refs.QueryForm.validate(valid => {
        if (valid) {
          //查询菜单
          this.loading = true;
          let resBody = new queryAdsRule();
          resBody.data.Brno = this.QueryForm.branchNum;
          resBody.data.DeviceType = this.QueryForm.deviceType;
          resBody.data.PlayRuleID = this.QueryForm.adsRuleId;
          resBody.data.AdNo = this.QueryForm.adNo;
          resBody.data.PageSize = this.pageSize + "";
          resBody.data.CurtPage = this.currentPage + "";
          resBody.data.StartRows = (this.currentPage - 1) * this.pageSize + "";
          request(resBody)
            .then(response => {
              if (response.APP_HEAD.ReturnCode === "000000") {
                this.loading = false;
                if (response.RspInfo) {
                  this.tabelDataList = response.RspInfo.Result || [];
                  this.total = response.RspInfo.TotalRcrdNum;
                  if (this.total === 0) {
                    this.$message({
                      type: "warning",
                      message: "没有满足条件得记录!"
                    });
                  }
                } else {
                  this.loading = false;
                  this.$message({
                    type: "warning",
                    message: "没有满足条件得记录!"
                  });
                }
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: "错误信息：" +  response.SYS_HEAD.ReturnMessage
                });
              }
            })
            .catch(error => {
              this.loading = false;
              console.log(error);
            });
        }
      });
    },
    handleCurrentChange(val) {
      //分页事件
      this.currentPage = val;
      this.query();
    },
    selectList(selection) {
      //表格选中事件
      //控制按钮是否禁用
      if (selection.length == 1) {
        this.isDisabledDel = true;
        this.currentRow = selection[0];
      } else if (selection.length > 1) {
        this.$refs.tabelDataList.toggleRowSelection(selection[0]);
      } else {
        this.isDisabledDel = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
